<template>
  <div class="address">
    <van-nav-bar title="收货地址" left-arrow fixed @click-left="$router.back()" />
    <div class="list">
        <div class="item" v-for="item in list" :key="item.address_id">
            <div class="info">
                <p>
                    <span>{{item.name}}</span>
                    <span>{{item.phone}}</span>
                </p>
                <p>
                    <span>{{item.region.province}}</span>
                    <span>{{item.region.city}}</span>
                    <span>{{item.region.region}}</span>
                    <span>{{item.region.detail}}</span>
                </p>
            </div>
            <div class="call">
                <p @click="selectAddress(item.address_id)">
                    <van-checkbox checked-color="#ee0a24" icon-size="18px" :value="item.address_id===defaultId"></van-checkbox>
                    <span v-if="item.address_id===defaultId">默认</span>
                    <span v-else>选择</span>
                </p>
                <p>
                    <span @click="$router.push(`/address/update?addressId=${item.address_id}`)">
                        <van-icon name="edit" size="14px"/>
                        <span>编辑</span>
                    </span>
                    <span @click="deleteAddress(item.address_id)">
                        <van-icon name="delete-o" size="14px"/>
                        <span>删除</span>
                    </span>
                </p>
            </div>
        </div>
    </div>

    <!-- 添加按钮 -->
    <div class="footer">
        <button @click="$router.push('/address/create')">添加新地址</button>
    </div>

  </div>
</template>

<script>

import { getAddressList, getAddressDefaultId, setAddressDefaultId, removeAddress } from '@/api/address'

export default {
  data () {
    return {
      list: [],
      defaultId: null
    }
  },
  async created () {
    this.getAddress()
  },
  methods: {
    async getAddress () {
      const { data: { defaultId } } = await getAddressDefaultId()
      this.defaultId = defaultId
      const { data: { list } } = await getAddressList()
      this.list = list
    },
    async selectAddress (addressId) {
      await setAddressDefaultId({ addressId })
      this.defaultId = addressId
      if (this.$route.query.from === 'checkout') {
        this.$router.back()
      }
    },
    deleteAddress (addressId) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '你确定要删除当前收货地址吗？'
      }).then(() => {
        removeAddress({ addressId })
        this.getAddress()
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>

.address {
 padding-top: 46px;
 padding-bottom: 60px;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.list {
    .item {
        width: 312px;
        height: 92px;
        background-color: white;
        padding: 15px 20px;
        margin: 10px auto;
        color: #303133;
        font-size: 15px;

        .info {

            border-bottom: 0.5px solid #f3f3f3;

            p {
                padding-bottom: 8px;

                span {
                    padding: 5px;
                }
            }

        }

        .call {
            height: 44px;
            display: flex;
            justify-content: space-between;
            padding-top: 15px;

            span {
                padding: 5px;
            }

            p:first-child {
                display: flex;
                height: 19px;

                span {
                    padding:0 8px;
                }
            }
        }
    }
}

.footer {
    height: 60px;
    width: 375px;
    position: fixed;
    bottom: 0;
    left: 0;

    button {
        background: linear-gradient(90deg, #f9211c, #ff6335);
        font-size: 14px;
        height: 40px;
        width: 335px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        border-radius: 25px;
        border: none;
        margin: 10px 20px;
    }
}

</style>
